<template>
  <div class="chat">
    <div class="chat-left">

    </div>
    <div class="chat-right">
      <div class="chat-right-header">{{loginId}}</div>
      <div class="chat-right-top">
        <Message v-for="(item, index) in data" :key="'message' + index" :img-txt="item.imgTxt"
                 :direction="item.direction" :value="item.value"></Message>
      </div>
      <div class="send-message">
        <el-input
          type="textarea"
          :rows="4"
          placeholder=""
          resize="none"
          autofocus
          v-model="textarea">
        </el-input>
        <el-button class="send-btn" size="small" @click="clickButton">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
    import Message from '@/components/chat/message'

    export default {
        name: "chat",
        data() {
            return {
                id: '',
                loginId: '',
                textarea: '',
                data: []
            }
        },
        components: {
            Message
        },
        mounted() {
            const name = ['大一', '小二', '张三', '李四', '王五', '马六', '书签', '网', '贡酒', '实']
            const index = Math.round(Math.random() * 10)
            this.loginId = name[index]
            this.$socket.emit('login', this.loginId);       //触发socket连接
        },
        sockets: {
            connect() {
                this.id = this.$socket.id;
                console.log(this.id, this.$socket)
                this.$socket.emit('login', this.loginId);      //监听connect事件
            },
            message(data) {  //监听message事件，方法是后台定义和提供的
                console.log(data);
            }
        },
        methods: {
            clickButton() {                       //添加按钮事件向服务端发送数据
                console.log(this.textarea)
                this.$socket.emit('sendMessage', this.textarea);
                this.data.push({imgTxt: this.loginId, direction: false, value: this.textarea})
                this.textarea = ''
            }
        }
    }
</script>

<style lang="scss">
  .chat {
    width: 100%;
    height: 100%;
    display: flex;

    &-left {
      width: 250px;
      height: 100%;
      overflow: auto;
      border-right: 1px solid #eee;
      background: #e5e5e5;
    }

    &-right {
      width: calc(100% - 250px);
      height: 100%;
      overflow: auto;
      position: relative;
      background: #f5f5f5;

      &-header {
        font-size: 24px;
        height: 48px;
        line-height: 48px;
        text-align: left;
        padding: 0 20px;
        border-bottom: 1px solid #ddd;
      }

      &-top {
        padding: 10px 20px 0;
        height: calc(100% - 48px - 140px);
        overflow: auto;
      }

      .send-message {
        height: 140px;
        width: 100%;
        position: absolute;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #ddd;

        .send-btn {
          position: absolute;
          right: 20px;
          bottom: 10px;
        }
      }
    }
  }
</style>
